jquery.filthypillow

a fancy and small calendar and date-time picker

Download .zip Download .tar.gz View on GitHub

Requirements

Tested with:
moment 2.2.1
jquery 1.9.1

Examples

var $fp = $( ".filthypillow-1" ),
    now = moment( ).subtract( "seconds", 1 );
$fp.filthypillow( { 
  minDateTime: function( ) {
    return now;
  } 
} );
$fp.on( "focus", function( ) {
  $fp.filthypillow( "show" );
} );
$fp.on( "fp:save", function( e, dateObj ) {
  $fp.val( dateObj.format( "MMM DD YYYY hh:mm A" ) );
  $fp.filthypillow( "hide" );
} );

Hotkeys

enter (save)

left-right arrows/tab (switch steps)

up-down arrows (change digits)

number keys (change digits)

Configuration

startStep

Step that should be active on initialization.

month, day, hour, minute, meridiem

Default

day

initialDateTime

Set the initial date time to be shown.

Default

null

Example

initialDateTime: function( m ) {
  return m.add( "day", 7 );
}

minDateTime

Set the earliest time that can be selected.

Default

null

Example

minDateTime: function( ) {
  return moment( ).subtract( "days", 1 ); //one day ago
}

maxDateTime

Set the latest time that can be selected.

Default

null

Example

maxDateTime: function( ) {
  return moment( ).add( "days", 7 ); //7 days from now
}

steps

Disable/enable steps by passing an array. Removing steps will prevent the user from activating that step (by clicking or using left/right arrows), but it will not hide the step (which should be done in CSS).

Default

[ "month", "day", "hour", "minute", "meridiem" ]

exitOnBackgroundClick

If the user clicks anywhere outside filthypillow (except for when the object has a class prepended with fp-), it will hide filthypillow.

Default

true

enableCalendar

Show the calendar when steps day or month are activated.

Default

true

calendar.saveOnDateSelect

Trigger save when an active date is selected within a calendar. This excludes date changes triggered from changing the month or selecting a date in a different month.

Default

false

Example

calendar: {
  saveOnDateSelect: true
}

calendar.isPinned

Keep the calendar showing even when the user has selected the hours, minutes, meridiem boxes.

Default

false

Example

calendar: {
  isPinned: true
}

Events

fp:save

Passes selected date object.

$( ".datetime" ).filthypillow( );
$( ".datetime" ).on( "fp:save", function( e, dateObj ) {
  console.info( dateObj );
} );

API

show( )

hide( )

destroy( )

updateDateTime( dateObj )

changeDateTimeUnit( unit, value )

setTimeZone( zone )

getDate( ): DateObj

isValid( ): Boolean

Tests

Run tests here.